<template>
  <div id="CarSharingUser">
    <el-card class="box-card" style="height:900px;">
      <ul id="ul1">
        <li>
          <el-input v-model="orderNumber" placeholder="请输入查询信息"></el-input>
        </li>
        <li>
          <el-button type="primary" >查询</el-button>
        </li>
      </ul>
      <!-- 表格 -->
      <el-table :data="orderData" border style="width: 100%;height:750px;" :header-cell-style="rowStyle" :cell-style="rowStyle">
        <el-table-column fixed prop="id" label="编号"></el-table-column>
        <el-table-column prop="orderNumber" label="订单号" min-width="200"></el-table-column>
        <el-table-column prop="commodityAmountTotal" label="商品总价钱" min-width="120"></el-table-column>
        <el-table-column prop="orderAmountTotal" label="订单金额" min-width="120" ></el-table-column>
        <el-table-column prop="orderTypeId" label="订单状态">
          <template slot-scope="scope">
            <p>
              {{ scope.row.orderTypeId === 1 ? "商品订单" :scope.row.orderTypeId === 2 ? "diy订单" : "888" }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="userB" label="购买人" min-width="100" ></el-table-column>
        <el-table-column prop="address" label="地址" min-width="150" ></el-table-column>
        <el-table-column prop="statusE" label="订单状态" min-width="120" ></el-table-column>
        <el-table-column prop="orderlogisticsId" label="物流订单编号" min-width="150" ></el-table-column>
        <el-table-column prop="outTradeNo" label="订单支付单号" min-width="150" ></el-table-column>
        <el-table-column prop="modeD" label="支付渠道" min-width="120" ></el-table-column>
        <!-- <el-table-column prop="workTime" label=""></el-table-column> -->
        <!-- <el-table-column prop="salary" label="薪资"></el-table-column> -->
        <!--
          格式化时间 年 月 日 时 分 秒
          <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat"></el-table-column>
        -->
        <el-table-column prop="createTime" label="创建时间" min-width="120" ></el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="dischargedById(scope.row.id)" type="primary" size="primary"  v-show="scope.row.statusId === 2" >点击即可发货</el-button>
            <el-button type="primary" @click="openAddAndUpdateUserWindow(scope.row)">打开</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[1, 5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          style="margin: 30px 0 10px">
        </el-pagination>
      <el-dialog :title="windowTypeInfo" :visible.sync="orderwodes" width="80%" height="80%"  center>
      <div v-show="aa === 1">  
        <p class="yu">商品订单</p>
        <div class="uo1">
      <el-table :data="commdiyDatee" border style="width: 110%;height:100%;"  v-show="aa === 1" :header-cell-style="rowStyle" :cell-style="rowStyle">
        <el-table-column fixed prop="id" label="编号"></el-table-column>
        <!-- <el-table-column prop="commodityOrderNumber" label="订单号" min-width="200"></el-table-column> -->
        <el-table-column prop="commodityPrice" label="商品价钱" min-width="120"></el-table-column>
        <el-table-column prop="commodityOrderStatus" label="订单状态">
          <template slot-scope="scope">
            <p>
              {{ scope.row.commodityOrderStatus === '0' ? "未付款" :scope.row.commodityOrderStatus === '1' ? "待发货" :scope.row.commodityOrderStatus === '4' ? "完成" :scope.row.orderStatus === '4' ? "完成"  :scope.row.commodityOrderStatus === '2' ? "待收货" :scope.row.commodityOrderStatus === '3' ? "待评价" : "888" }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="commodityNameB" label="商品名字" min-width="200" ></el-table-column>
        <!--
          格式化时间 年 月 日 时 分 秒
          <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat"></el-table-column>
        -->
        <el-table-column prop="createTime" label="创建时间" min-width="120" ></el-table-column>
      </el-table>
      </div>  
        </div>
        <div v-show="aa === 2">
            <p class="yu">diy订单</p>
            <div class="uo2">
              <el-table :data="commdiyDate" border style="width: 110%;height:100%;"   v-show="aa === 2" :header-cell-style="rowStyle" :cell-style="rowStyle">
            <el-table-column fixed prop="id" label="编号"></el-table-column>
            <el-table-column prop="diyPrice" label="下单价格" min-width="120"></el-table-column>
            <el-table-column prop="diynameC" label="DIY名称" min-width="120"></el-table-column>
            <el-table-column prop="arrivalNum" label="到店人数" min-width="120" ></el-table-column>
            <el-table-column prop="handworkDiyQuantity" label="diy商品数量"></el-table-column>
            <el-table-column prop="handworkDiyStatus" label="订单状态">
              <template slot-scope="scope">
            <p>
              {{ scope.row.handworkDiyStatus === '0' ?  "未付款" :scope.row.handworkDiyStatus === '1' ? "待发货" :scope.row.handworkDiyStatus === '2' ? "待收货" :scope.row.handworkDiyStatus === '3' ?   "待评价" : "888" }}
            </p>
          </template>
            </el-table-column>
            <el-table-column prop="arrivalTime" label="到货日期"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" min-width="120" ></el-table-column>
          </el-table>
        </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="orderwodes = false">取 消</el-button>
          <el-button @click="resetForm('userFormRef')">重 置</el-button>
          <el-button type="primary" @click="slidesInfo('userFormRef')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CarSharingUser',
  data () {
    return {
      ay:'',
      aa:'',
      disable: true,
      orderwodes: false,
      windowTypeInfo: '查看订单', // 窗口类型信息
      orderNumber: '', //模糊查订单号
      userId:'', //模糊查用户
      orderData: [], // 员工查询数据、
      commData:[],
      commdiyDate:[],
      commdiyDatee:[],
      diyorderDate:[],
      userInfo: {}, // 员工信息
      pageSize: 10, // 每页显示的个数
      pageNum: 1, // 起始的页数 表格中当前页面
      total: 0
    }
  },
  mounted () {
    this.orderlist()
   
  },
  methods: {
    handleSizeChange (val) {
      this.pageSize = val
      this.orderlist()
      console.log(`每页 ${val} 条`)
    this.orderlist()

    },
    handleCurrentChange (val) {
      this.pageNum = val
      console.log(`当前页: ${val}`)
    this.orderlist()

    },
    listdiy(){

    },
    dischargedById (id) {
      // 删除信息
      this.$confirm('是否发货呢？？？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete('orderlist/dischargedOrder', {
              params: {
                id: id
              }
            })
            .then((res) => {
              if (res.status === 200) {
                this.orderlist()
                this.myMessage('success', '您成功发货')
              }
            })
        })
        .catch((error) => {
          console.log(error)
          this.myMessage('info', '已取消')
        })
    },
    
    orderlist () {
      // 查询员工信息
    
      this.$axios
        .get('orderlist/orderList', {
          params: {
            orderNumber: this.orderNumber,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        })

        .then((res) => {
          if (res.status === 200) {
        this.orderData = res.data.data.content
        this.total = res.data.data.totalSize
        this.ay  = statusId
          }
        })
        // .catch((error) => {
        //   this.myMessage('error', '错误哦！系统错误，请联系管理员！')
        //   console.log(error)
        // })
    },
    diyorderlist () {
      // 查询员工信息
      this.$axios
        .get('diyorderl/diyorderllist', {
        })
        .then((res) => {
          if (res.status === 200) {
        this.diyorderDate = res.data.data
          }
        })
        // .catch((error) => {
        //   this.myMessage('error', '错误哦！系统错误，请联系管理员！')
        //   console.log(error)
        // })
    },
    commorderlist () {
      // 查询员工信息
      this.$axios
        .get('commorder/commorderlist', {
        })
        .then((res) => {
          if (res.status === 200) {
        this.commData = res.data.data
          }
        })
        // .catch((error) => {
        //   this.myMessage('error', '错误哦！系统错误，请联系管理员！')
        //   console.log(error)
        // })
    },
    selectchange(a){
    },
    openAddAndUpdateUserWindow (a) {
      this.aa = a.orderTypeId
      this.orderwodes = true
      if(a.orderTypeId==1){
        this.$axios.get('commorder/commorderlist?id='+a.id).then(result =>{
      if (result.data.flag) {
        this.commdiyDatee = result.data.data
      } 
    })
      }else if(a.orderTypeId==2){
        this.$axios.get('diyorderl/diyorderllist?id='+a.id).then(result =>{
      if (result.data.flag) {
        this.commdiyDate = result.data.data
      }
    })
      }
    },
    // 提示信息
    myMessage (type, message) {
      this.$message({
        showClose: true,
        message: message,
        type: type
      })
    },
    // 表格文字居中
    rowStyle () {
      return 'text-align:center'
    },
  }
}
</script>

<style lang="scss" scoped>
  #ul1{
    height: 40px;
    margin-bottom: 15px;
    list-style: none; 
    
    

  }
  #ul1 li{
    float: left;
    margin-right: 10px;
  }
  .uo1{
    width: 100%;
    height: 100%;
    background: beige;
  }
  .yu{
    font-size: 20px;
    text-align: center;
  }
  .uo2{
    width: 100%;
    height: 100%;
    background: rgb(168, 106, 56);
  }
</style>
